<!--历史数据-->
<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="对比时间1:">
              <a-date-picker v-model:value="where.oneDate" type="date" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item label="对比时间2:">
              <a-date-picker v-model:value="where.twoDate" type="date" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">对比</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>

          </a-row>
        </a-form>
      </a-card>

      <a-card
        :bordered="false"
        title="运动量按小时数据对比"
        :body-style="{padding: '16px 6px 0 0'}">
        <v-chart
          ref="sportChart"
          style="height: 362px;"
          :option="sportChartOption"/>
      </a-card>

      <a-card
        :bordered="false"
        title="睡眠量按小时数据对比"
        :body-style="{padding: '16px 6px 0 0'}">
        <v-chart
          ref="sleepTimeChart"
          style="height: 362px;"
          :option="sleepTimeChartOption"/>
      </a-card>
    </div>

  </div>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import moment from 'moment';
import {DeviceLiedownHourTimesApi} from "@/api/property/cattlesports/DeviceLiedownHourTimesApi";


use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);
provide(THEME_KEY, ChartTheme);

export default {
  name: 'CattleManagerCattleLiedownHourdataDiff',
  components: {
    VChart
  },
  props: {
    data: Object
  },
  async mounted() {
    this.getUseWaterData();
  },
  data() {
    return {
      // 表格搜索条件
      where: {"cattleId" : this.data.cattleId},
      sportData : {
        "yesterday" : [],
        "today" : [],
        "serialNameYesterday" : "昨日运动量",
        "serialNameToday" : "今日运动量",
      },
      sleepTimeData : {
        "yesterday" : [],
        "today" : [],
        "serialNameYesterday" : "昨日睡眠量",
        "serialNameToday" : "今日睡眠量",
      }
    }
  },
  computed: {
    sportChartOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: [this.sportData.serialNameYesterday, this.sportData.serialNameToday],
          right: 20
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          name : "小时",
          data : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
        },
        yAxis: [
          {
            type: 'value',
            name: '运动量',
            alignTicks: true,
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: this.sportData.serialNameYesterday,
            type: 'bar',
            data: this.sportData.yesterday,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
          },
          {
            name: this.sportData.serialNameToday,
            type: 'bar',
            data: this.sportData.today,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
          }
        ]
      }
    },
    sleepTimeChartOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: [this.sleepTimeData.serialNameYesterday, this.sleepTimeData.serialNameToday],
          right: 20
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          name : "小时",
          data : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
        },
        yAxis: [
          {
            type: 'value',
            name: '睡眠量',
            alignTicks: true,
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value} 秒'
            }
          }
        ],
        series: [
          {
            name: this.sleepTimeData.serialNameYesterday,
            type: 'bar',
            data: this.sleepTimeData.yesterday,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 秒";
              }
            },
          },
          {
            name: this.sleepTimeData.serialNameToday,
            type: 'bar',
            data: this.sleepTimeData.today,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 秒";
              }
            },
          }
        ]
      }
    }

  },
  methods: {
    /**
     * 搜索按钮
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reload() {
      this.getUseWaterData();
    },


    /**
     * 重置搜索
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reset() {
      this.where.cattleId = this.data.cattleId;
      this.where.oneDate = '';
      this.where.twoDate = '';
      this.$nextTick(() => {
        this.reload();
      });
    },

    getUseWaterData(){
      if (this.where.oneDate == null || this.where.oneDate == '') {
        this.where.oneDate = moment().subtract(1, 'days').format('YYYY-MM-DD');
      }
      if (this.where.twoDate == null || this.where.twoDate == '') {
        this.where.twoDate = moment().format('YYYY-MM-DD');
      }
      this.sportData.serialNameYesterday = this.where.oneDate;
      this.sportData.serialNameToday = this.where.twoDate;
      this.sleepTimeData.serialNameYesterday = this.where.oneDate;
      this.sleepTimeData.serialNameToday = this.where.twoDate;

      let that = this;
      let yesterdayParams = {
        searchBeginTime : this.where.oneDate + " 00:00:00",
        searchEndTime : this.where.oneDate + " 23:59:59",
        "cattleId" : that.data.cattleId,
        "orderBy" : "cal_hour",
        "sortBy" : "ASC",
      };

      let todayParams = {
        searchBeginTime : this.where.twoDate + " 00:00:00",
        searchEndTime : this.where.twoDate + " 23:59:59",
        "cattleId" : that.data.cattleId,
        "orderBy" : "cal_hour",
        "sortBy" : "ASC",
      };
      that.sportData.yesterday = [];
      that.sportData.today = [];
      that.sleepTimeData.yesterday = [];
      that.sleepTimeData.today = [];

      Promise.all([
        DeviceLiedownHourTimesApi.list(yesterdayParams),
        DeviceLiedownHourTimesApi.list(todayParams)
      ]).then(function (resArr){
        console.log(resArr);
        let yesterdayResultData = resArr[0].data;
        let todayResultData = resArr[1].data;
        //昨天数据
        let yesterdayMap = new Map();//创建一个空的Map
        let sleepYesterdayMap = new Map();
        if (yesterdayResultData && yesterdayResultData.length > 0) {
          yesterdayResultData.forEach(function (item) {
            let timeIndex = parseInt((item.calHour + "").substr(8));
            yesterdayMap.set(timeIndex, item.standStep);
            sleepYesterdayMap.set(timeIndex, item.lieTime);
          });
        }

        for (let i=0; i < 24;i++) {
          if (yesterdayMap.get(i) == undefined) {
            that.sportData.yesterday.push(0);
          } else {
            that.sportData.yesterday.push(yesterdayMap.get(i));
          }

          if (sleepYesterdayMap.get(i) == undefined) {
            that.sleepTimeData.yesterday.push(0);
          } else {
            that.sleepTimeData.yesterday.push(sleepYesterdayMap.get(i));
          }
        }

        //今天数据
        let todayMap = new Map()//创建一个空的Map
        let sleepTodayMap = new Map();
        if (todayResultData && todayResultData.length > 0) {
          todayResultData.forEach(function(item) {
            let timeIndex = parseInt((item.calHour + "").substr(8));
            todayMap.set(timeIndex, item.standStep);
            sleepTodayMap.set(timeIndex, item.lieTime);
          });
        }
        for (let i=0; i < 24;i++) {
          if (todayMap.get(i) == undefined) {
            that.sportData.today.push(0);
          } else {
            that.sportData.today.push(todayMap.get(i));
          }
          if (sleepTodayMap.get(i) == undefined) {
            that.sleepTimeData.today.push(0);
          } else {
            that.sleepTimeData.today.push(sleepTodayMap.get(i));
          }
        }
        console.log(that.sportData);
        console.log(that.sleepTimeData);
      });
    },
    activated() {
      ['sportChart', 'sleepTimeChart'].forEach((name) => {
        this.$refs[name].resize();
      });
    }
  }
};
</script>
